<template>
  <!-- <div class="main"> -->
  <el-dialog
    title="制作PDF文件"
    :visible.sync="dialogVisible"
    width="1200px"
    :before-close="handleClose"
    v-dialogDrag
  >
    <textarea
      id="Console"
      style="
        height: 40px;
        width: 1140px;
        text-align: center;
        resize: none;
        margin-left: 10px;
      "
      disabled="disabled"
      placeholder="点击打开视频，显示开始制作pdf，即可拍照"
    ></textarea>
    <div class="Content">
      <div style="flex: 1; max-width: 300px">
        <div
          style="
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 20px;
          "
        >
          <!-- 渲染上去后，获取dom src -->
          <p id="contentId" ref="contentId" style="display: none"></p>

          <img id="Base64IMG" ref="IMG0" style="width: 0%" src="" alt="" />
          <div class="imgList">
            <!-- <el-tag type="warning">只显示最近3张</el-tag> -->
            <div class="imgbox-style">
              <el-tag type="warning"> 图片预览区域,仅支持最近3张 </el-tag>
              <div class="img-box img-box3">
                <i
                  class="icon-ym icon-ym-delete"
                  @click="deletePdfHandle(3)"
                ></i>
                <img id="IMG3" ref="IMG3" class="IMGstyle" src="" alt="" />
              </div>
              <div class="img-box img-box2">
                <i
                  class="icon-ym icon-ym-delete"
                  @click="deletePdfHandle(2)"
                ></i>
                <img id="IMG2" ref="IMG2" class="IMGstyle" src="" alt="" />
              </div>
              <div class="img-box img-box1" style="width: 0">
                <i
                  class="icon-ym icon-ym-delete"
                  @click="deletePdfHandle(1)"
                ></i>
                <img id="IMG1" ref="IMG1" class="IMGstyle" src="" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="width: 640px; height: 640px">
        <canvas
          id="cam"
          width="640"
          height="640"
          value="123"
          style="border: 1px solid #000000"
        >
        </canvas>
      </div>
      <div class="box-right-box">
        <!-- <div> -->
        <p class="desction">
          提示:拍摄的照片存储在本地的地址为: D:\contractPdf
          ,可复制到此电脑路径处查看.
        </p>
        <!-- </div> -->
        <el-button
          @click="switchHandle"
          v-if="kaishi"
          round
          type="success"
          class="btnStyle"
          >开始拍照</el-button
        >
        <el-button
          @click="SetRightHandle"
          round
          type="primary"
          plain
          class="btnStyle setRightStyle"
          v-if="!kaishi"
          >向右旋转</el-button
        >
        <el-button
          @click="SetLeftHandle"
          round
          plain
          type="primary"
          class="btnStyle"
          v-if="!kaishi"
          >向左旋转</el-button
        >
        <el-button
          @click="GetPDFHandle"
          v-if="!kaishi"
          circle
          type="primary"
          class="btnStyle getpdf-style"
          >拍照</el-button
        >
        <el-button
          @click="CloseVideoHandle"
          round
          type="warning"
          class="btnStyle overstyle"
          v-if="!kaishi"
          :loading="loading"
          >拍照完成</el-button
        >
      </div>
    </div>
  </el-dialog>
  <!-- </div> -->
</template>

<script>
import {
  onLoad,
  cam_switch,
  CloseVideo,
  SetLeft,
  SetRight,
  BeginPDF,
  GetPDF,
  EndPDF,
  UploadFile,
  DelPDF1,
  DelPDF2,
  DelPDF3,
  SetPDFPath,
} from "@/utils/gaopaiyi.js";
import BaseAPI from "@/utils/define.js";
export default {
  data() {
    return {
      dialogVisible: false, //是否显示组件
      iscam: false, //相机是否打开

      kaishi: true, //开始按钮控制
      paIz: false, //是否拍照
      // baseUrl: [],
      gaopaiId: -1, //高拍仪相机唯一id，制作完成后通过id直接渲染到界面
      pdfName: "", //完成制作的pdf名称
      type: null, //如果两个文件同文件使用
      baseUrl: "localhost:3000",
      loading: false,
    };
  },
  created() {
    onLoad();
  },
  mounted() {
    // console.log("BaseAPI", BaseAPI.comUrl);
    // console.log("process============================>>>>>", process);
  },
  methods: {
    getDates() {
      let timestamp = Math.round(new Date());
      timestamp = new Date(timestamp);
      let y = timestamp.getFullYear();
      let m = timestamp.getMonth() + 1;
      let d = timestamp.getDate();
      let huour = timestamp.getHours();
      let mm = timestamp.getMinutes();
      let ss = timestamp.getSeconds();
      return `${y}${m}${d}${huour}${mm}${ss}`;
    },
    // 关闭相机;结束拍照,并提交
    CloseVideoHandle() {
      if (!this.iscam) return; //判断摄像头有无打开
      this.loading = true;
      // 获取时间  并且以时间命名文件
      let dates = this.getDates();
      this.pdfName = `${dates}.pdf`;
      console.log(this.pdfName);

      // 结束pdf制作;
      EndPDF(dates);
      if (this.gaopaiId == -1 || !this.gaopaiId == -1 || !this.pdfName)
        return console.log("无高拍id");
      // 上传文件
      this.loading = true;

      // http://192.168.1.166:30000BaseAPI.comUrl
      UploadFile(BaseAPI.comUrl, this.pdfName, this.gaopaiId);

      setTimeout(() => {
        this.kaishi = true;
        //关闭相机
        CloseVideo(1);
        this.closeIMG(); //清空左侧相册
        // console.log(this.$refs.IMG1.src);
        this.type = "";
        this.dialogVisible = false;
        this.loading = false;
        this.$emit("accomplishPdf", this.gaopaiId, this.type);
      }, 1500);
    },
    // 打开相机
    switchHandle() {
      this.closeIMG(); //清空左侧相册
      cam_switch(1);
      // SetPDFPath();
      setTimeout(() => {
        BeginPDF(false); //开始制作PDF
        this.kaishi = false;
        this.iscam = true;
      }, 1200);
    },
    // 左旋
    SetLeftHandle() {
      if (!this.iscam) return;
      SetLeft();
    },
    // 右旋
    SetRightHandle() {
      if (!this.iscam) return;
      SetRight();
    },
    // 拍照
    GetPDFHandle() {
      GetPDF(true);
      if (this.$refs.IMG1.src.indexOf("data:image/jpg;base64") != -1) {
        this.paIz = true;
      }
    },
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    //将blob转换为file
    blobToFile(theBlob, fileName) {
      theBlob.lastModifiedDate = new Date();
      theBlob.name = fileName;
      return theBlob;
    },
    open(gaopaiId, type) {
      this.type = type;
      if (!gaopaiId || gaopaiId == -1) return console.log("没有高拍id");
      this.gaopaiId = gaopaiId;
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.kaishi = true;
          if (!this.iscam) return;
          this.closeIMG(); //清空照片
          CloseVideo(1); //关闭相机
        })
        .catch((_) => {
          console.log("已经取消关闭");
        });
    },
    closeIMG() {
      console.log("清空img");
      this.$refs.IMG1.src = "";
      this.$refs.IMG2.src = "";
      this.$refs.IMG3.src = "";
    },
    deletePdfHandle(num) {
      if (num == 1) {
        DelPDF1();
      } else if (num == 2) {
        DelPDF2();
      } else if (num == 3) {
        DelPDF3();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.Content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  // align-content: center;
}
.box-right-box {
  height: 640px;
  width: 200px;
  border: 1px solid #a59da5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 40px;
  position: relative;
  // margin-left: 30px;
}
.btnStyle {
  // display: block;
  margin-left: 0 !important;
  width: 120px;
  margin: 10px auto;
  font-size: 18px;

  // margin-top: 10px;
}
.setRightStyle {
  margin-top: 50px;
}
.imgList {
  border: 1px solid #a59da5;
  width: 400px;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
  height: 640px;
  overflow: auto;
  margin-top: -20px;
}

.imgbox-style {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .img-box {
    display: none;
    position: relative;
    // border: 1px solid #ccc;
    min-height: 230px;
  }
  .IMGstyle {
    width: 230px;
    margin-top: 8px !important;
  }
  i {
    width: 24px;
    height: 24px;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    margin: 0 auto;
    background-color: rgba($color: #ccc, $alpha: 0.4);
    color: #f48a21;
    position: absolute;
    top: 8px;
    right: 0;
  }
  i:hover {
    color: #fa6e17;
  }
}
.getpdf-style {
  height: 120px;
  // width: 100px;
  font-size: 24px;
  font-weight: 600;
}
.overstyle {
  position: relative;
  right: 15px;
  width: 150px;
  margin-top: 60px;
}
.desction {
  position: absolute;
  left: 0;
  top: 0;
  display: black;
  width: 100%;
  padding: 5px;
  color: #ccc;
}
</style>